<!-- 研究发布表单提交 -->
<template>
    <div class="form-main" style="width: 640px; max-width: 640px;margin: 0 auto">
        <div data-v-6d6c5045="" class="form-header"
            style="color: rgb(255, 255, 255); background-color: rgb(102, 154, 204);">
            <h2 class="form-title">《2025全球AI安全报告》</h2>
            <p class="form-main-desc"></p>
        </div>
        <div class="form-content" style="background-color: rgb(248, 248, 248);">
            <el-form :model="form" label-width="auto">
                <el-form-item label="姓名" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="单位" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="部门" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="职位" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="手机" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="E-mail" width="120px" label-position="top">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="是否愿意持续收到AICPA & CIMA的相关资讯与研究报告吗？" label-position="top">
                    <el-radio-group v-model="form.resource">
                        <el-radio value="1">是</el-radio>
                        <el-radio value="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="声明" label-position="top">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox value="Online activities" name="type">
                            我已经认真阅读【<a href="/">隐私条款</a>】
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>


                <el-form-item>
                    <div style="text-align: right;width: 100%;">
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button>取消</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>
<style scoped lang='less'>
.form-main {
    margin: 40px auto;
}

.form-title {
    color: inherit;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0;
    font-size: 20px;
}

.form-header {
    margin: 40px auto 0;
    padding: 20px 24px;
    border-radius: 0;
    background-color: #fff;
    position: relative;
}

.ant-layout,
.ant-layout * {
    box-sizing: border-box;
}



.form-main-desc {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0;
    text-align: center;
}

.form-content {
    padding: 20px 24px;
    box-shadow: 0 1px 6px hsla(0, 0%, 48.6%, .42);
}

.ant-form {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
}
</style>